<!--
 * @Author: [kangjie]
 * @Date: 2022-03-31 14:18:27
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-03-31 14:44:39
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  
</head>
<body>
    <div id="app">
      <!-- 父组件给子组件传值第一步:  
        将想要传递给子组件的数据写在使用子组件的标签里面 -->
        <!-- <div @click="handler"></div> -->
      <my-com @my-event="handler" :msg="msg" title="我是父组件给子组件传递的数据" attr-a="父给子的静态属性"></my-com>
    </div>
    <script>
      // 父子之间如何传值/通信 
      // 父组件  --》子组件传值
      // 子组件要使用父组件的数据 传值操作
      let mycom={
        // 接收父组件传递过来的数据
        props:['msg','title','attrA'],
        data(){
          return {
            subMsg:'我是子组件'
          }
        },
        methods:{
          toEdit(){
            // $emit方法就是发射方法 
            // 参数:自定义事件名称 子组件传递给父组件数据
            this.$emit('my-event',this.subMsg,'hello');
          }
        },
        template:`
          <div>
            子组件-{{msg}}-{{title}}-{{attrA}}
            <button @click='toEdit'>发射数据</button>
          </div>
        `
      };
      new Vue({
        // 局部注册组件
        components:{
          'my-com':mycom
        },
        el:"#app",
        data:{
          msg:'我是父组件'
        },
        methods:{
          handler(a,b){
            console.log(a,b,'接收子组件传递的数据');
          }
        }
      })
    </script>
</body>
</html>
<!-- 1.组件之间通信/传值/交互 
  1.父组件给子组件传值 向下传递prop
    1.在子组件的自定义标签上传递数据 <my-com :msg='msg'>
    2.在子组件使用props进行接收 props:['msg']
  2.子组件给父组件进行传值 向上传递事件
      1.在子组件里面发射事件 this.$emit('自定义事件名称',发射数据);
      2.在父组件里面使用子组件的标签上绑定自定义事件 接收子组件的数据
--